<!-- 优惠劵列表  -->
<template>
  <view class="page_box">
    <view class="head_box u-m-b-20">
      <shopro-navbar back-icon-color="#333" :background="{ backgroundColor: '#fff' }">
        <view slot="content" class="u-flex nav-wrap">
          <view class="nav-item u-flex-1 u-flex-col u-row-center u-col-center" v-for="nav in navbarHeadState" :key="nav.value" @tap="onHead(nav.value)">
            <view class="item-title" :class="{ 'title-active': navState === nav.value }">{{ nav.title }}</view>
            <!--						<text class="nav-line" :class="{ 'line-active': navState === nav.value }"></text>-->
          </view>
        </view>
      </shopro-navbar>
     <view class="coupon-nav u-flex">
          <button
            class=" cu-btn nav-btn u-flex-col u-row-center u-col-center"
            :class="{ 'btn-active': nav.id == stateCurrent }"
            v-for="(nav,index) in couponsState"
            :key="nav.id"
            @tap="onNav(nav.id,index)"
          >
            <view class="item-title">{{ nav.title }}</view>
          </button>
        </view>
    </view>
    <view class="content_box">
      <view class="coupon-list" v-for="(c, index) in couponList" :key="index" @tap="status=='0'?toCouponDetail(c):''">
        <shopro-couponme-serve :state="stateCurrent" :couponData="c"></shopro-couponme-serve>
      </view>
      <!-- 缺省页 -->
      <shopro-empty marginTop="300rpx" v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无此类优惠券"></shopro-empty>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      stateCurrent:1,
      isEmpty: false,
      navState: 'event',
      navbarHeadState: [
        // {
        // 	value: 'event',
        // 	title: '领券中心'
        // },
        {
          value: 'user',
          title: '服务卡券'
        }
      ],
      couponsState: [
        {
          id: 1,
          title: '未使用'
        },
        {
          id: 2,
          title: '已使用'
        },
        {
          id: 3,
          title: '已过期'
        }
      ],
      couponList: [],
      status:'0'
    };
  },
  computed: {},
  onShow(){
    this.getCouponList();
  },
  methods: {
    onNav(id,index) {
      if (this.stateCurrent !== id) {
        this.stateCurrent = id;
        this.couponList = [];
        this.status = index
        this.getCouponList();
      }
    },
    onHead(value) {
      if (this.navState !== value) {
        this.navState = value;
        if (value === 'event') {
          this.stateCurrent = 0;
        }
        if (value === 'user') {
          this.stateCurrent = 1;
        }
        this.couponList = [];
        this.getCouponList();
      }
    },
    jump(path, parmas) {
      this.$Router.push({
        path: path,
        query: parmas
      });
    },
    getCouponList() {
      let that = this;
      that.$https('coupons.servelist', {
        token: uni.getStorageSync('token'), // 用户身份标识
        status:this.status
      }).then(res => {
        if (res.code === 1) {
          that.couponList = res.data;
          that.isEmpty = !that.couponList.length;
        }
      });
    },

    //跳转优惠券详情
    toCouponDetail(data) {
      uni.navigateTo({
        url: '/pages/app/coupon/serveCardUse?serve_id='+data.id+'&expiretime_text='+data.expiretime_text,
      });
    }
  }
};
</script>

<style lang="scss">
.nav-item {
  flex: 1;
  height: 100%;
  .item-title {
    font-size: 30rpx;
    font-weight: 400;
    color: #666;
  }
  .title-active {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
  .nav-line {
    width: 128rpx;
    height: 6rpx;
    border-radius: 3rpx;
    background: #fff;
  }

  .line-active {
    background: #010101;
  }
}
.nav-wrap {
  /* #ifdef MP-WEIXIN */
  width: 460rpx;
  /* #endif */
  /* #ifndef MP-WEIXIN */
  width: 100%;
  /* #endif */
}
.coupon-nav {
  background: #fff;
  height: 100rpx;
  padding: 0 30rpx;
  .nav-btn {
    margin-right: 10rpx;
    font-size: 26rpx;
    color: #666;
  }
  .btn-active {
    font-size: 26rpx;
    color: #fff;
    background-color: #010101;
  }
}
.coupon-list {
  margin: 30rpx 20rpx;
}
</style>
